<template>
	<view style="height: 100vh;background-color: #f5f5f5;display: flex;flex-direction: column;align-items: center;">
		<view class="item">
			<view class="top">
				<text class="title">问题和建议</text>
				<text class="point">*</text>
			</view>
			<textarea class="text" placeholder-style="color:#999999" placeholder="请输入您的问题以及建议（最多100字）"
				v-model="feedback.content"></textarea>
		</view>

		<view class="item">
			<view class="top">
				<text class="title">接收反馈手机号</text>
				<text class="point">*</text>
			</view>
			<input class="text2" type="number" placeholder="请输入11位手机号" v-model="feedback.mobileNumber" />
		</view>

		<button class="_btn" @click="handleSubmit">
			提交
		</button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';

	import {
		feedbackApi
	} from '@/packagenew/api/feedback.js'

	const feedback = reactive({
		content: '',
		mobileNumber: ''
	});

	const handleSubmit = async () => {
		// 手机号正则验证
		const mobileRegex = /^1[3-9]\d{9}$/;
		if (!mobileRegex.test(feedback.mobileNumber)) {
			uni.showToast({
				title: '手机号格式不正确',
				icon: 'none',
				duration: 2000
			});
			return;
		}

		// 内容非空验证
		if (!feedback.content.trim()) {
			uni.showToast({
				title: '请填写反馈内容',
				icon: 'none',
				duration: 2000
			});
			return;
		}
		try {
			// 发送 JSON 格式数据
			const res = await feedbackApi.add(JSON.stringify(feedback))

			if (res.code === 200) {
				uni.showToast({
					title: '提交成功',
					icon: 'none',
					duration: 2000
				});
				// 清空表单
				feedback.content = '';
				feedback.mobileNumber = '';
			} else {
				uni.showToast({
					title: '提交失败',
					icon: 'none',
					duration: 2000
				});
			}
		} catch (error) {
			console.error('请求错误:', error);
			uni.showToast({
				title: '网络请求失败',
				icon: 'none',
				duration: 2000
			});
		}
	};
</script>

<style scoped>
	._btn {
		height: 100rpx;
		width: 710rpx;
		border-radius: 50rpx;
		background-color: #2775e6;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		position: absolute;
		bottom: 120rpx;
	}

	.item {
		margin-top: 30rpx;
	}

	.item .top {
		margin-bottom: 20rpx;
	}

	.item .top .title {
		font-size: 28rpx;
	}

	.item .top .point {
		color: red;
	}

	.item .text {
		background-color: #fff;
		height: 360rpx;
		width: 670rpx;
		border-radius: 20rpx;
		padding-top: 40rpx;
		padding-left: 40rpx;
	}

	.item .text2 {
		background-color: #fff;
		height: 80px;
		width: 670rpx;
		border-radius: 20rpx;
		padding-top: 40rpx;
		padding-left: 40rpx;
	}
</style>